<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-04-10 17:00:47
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-04-24 16:08:46
 * @FilePath: \dong2\src\components\index\introduceBox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="box">
        <div @mouseleave="moveEnter1=!moveEnter1" :class="moveEnter1? 'c1 content':'content'" @mouseenter="moveEnter1=!moveEnter1">
        <img src="@/assets/introduce/1.jpg" alt="">
        <div>{{ introduceList[0].title }}</div>
        <p class="text">{{ introduceList[0].text }}</p>
        </div>    
        <div @mouseleave="moveEnter2=!moveEnter2" :class="moveEnter2? 'c1 content':'content'" @mouseenter="moveEnter2=!moveEnter2">
        <img src="@/assets/introduce/2.png" alt="">
        <div>{{ introduceList[1].title }}</div>
        <p class="text">{{ introduceList[1].text }}</p>
        </div>    
        <div @mouseleave="moveEnter3=!moveEnter3" :class="moveEnter3? 'c1 content':'content'" @mouseenter="moveEnter3=!moveEnter3">
        <img src="@/assets/introduce/3.jpg" alt="">
        <div>{{ introduceList[2].title }}</div>
        <p class="text">{{ introduceList[2].text }}</p>
        </div>    
    </div>
</template>

<script>
// import myIntroduce from './myIntroduce.vue';
export default {
    data() {
        return {
            introduceList: [
                {
                    src: '@/assets/introduce/1.jpg',
                    title: '文字界的活化石',
                    text:'由纳西人所创制的一种象形文字,世界上唯一活着的象形文字'
                },
                {
                    src: '../../assets/introduce/2.png',
                    title: '现代传承与发展',
                    text:'举世独特的辨识符号,纳西重要的文化遗产'
                },
                {
                    src: '../../assets/introduce/3.jpg',
                    title: '与时俱进的创作',
                    text:"写无定法的图画,却形音意兼备"
                },
            ],
            moveEnter1:false,
            moveEnter2:false,
            moveEnter3:false
        }
    },
}
</script>
<style lang="scss" scoped>
.box{
    display: flex;
    width: 1000px;
    margin: 0 auto;
    justify-content: space-between;
    background: white;
    margin-top: 20px;
    // z-index: 10;
}
.content{
    width: 200px;
    height: 200px;
    flex-direction: column;
    justify-content: flex-start;
}
.content div{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
.content img{
    width: 200px;
}
.content p{
    font-size: 13px;
    margin: 10px 25px;
}
.c1{
    z-index: 10;
    transform: translateY(-10px);
}
</style>